<template>
	<view class="page-content"  :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}">
		<view class="m-top-banner">
			<u--image :showLoading="true" :src="Item.goods_thumbs" width="100%" height="100%" mode="widthFix"></u--image>
		</view>
		<view class="m-price flex-between" style="align-items: center;">
			<view class="u-price">
				<text>{{ Item.goods_integral }}</text>
				<text class="e-company">{{configInfo.integral_company}}</text>
			</view>
			<view class="u-num">
				{{$util.handleStr($t('goods_detail.good-surplus'), Item.goods_join_num) }}
			</view>
		</view>
		<view class="m-title">
			<text class="goods-badge text-xs radius-5" :class="{'true' : Item.goods_type == 2}">{{ Item.type_text }}</text>
			{{ Item.goods_title }}
		</view>
		<view class="m-details">
			<mp-html :content="Item.goods_details" />
		</view>
		<view class="goods-carts">
			<u-button
				:text="btnText"
				shape="circle"
				:color="configInfo.mainColor" 
				style="color:#555"
				loadingText=" "
				@click="exchange(Item)"
			>
			</u-button>
			<!-- <view class="btn" :class="{'display' : btnDisplay}" >{{ btnText }}</view> -->
<!-- 			<u-button text="立即兑换" type="warning" shape="circle" @click="go(Item)"></u-button> -->
		</view>
		<!-- 侧边小工具 -->
		<side-tools :scrollTop="scrollTop"></side-tools>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				Id:'',
				Item:[],
				btnText:this.$t('goods_detail.change-btn'),
				btnDisplay:false,
				goodsCacheKey:'',
				scrollTop:0
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
			goodsCache: state => state.mall.goodsDetailKey, // 商品缓存key
		}),

		async onLoad(option){
			this.Id = option.id;
			this.goodsCacheKey = this.goodsCache + this.Id
			this.Item =  uni.getStorageSync(this.goodsCacheKey) || '';
		},
		onReady(){
			if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		async onShow(){
			this.getInfo();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			
			// 获取商品详情
			async getInfo(){
				let {
					Id
				} = this
				let res = await this.$api.mall.getMallInfo(Id)
				if(res.code == 200){
					this.Item = res.data
					this.$util.setCache(this.goodsCacheKey, res.data, 60)
				}
			},
			
			// 异常状态提示
			checkState(){
				uni.showToast({
					title:this.$t('goods_detail.good')+this.Item.state_text,
					icon:'none'
				})
				this.btnText = this.Item.state_text;
				this.btnDisplay = true;
			},
			
			// 跳转兑换
			exchange(Item){
				// 检查商品状态
				if(this.Item.goods_state != 1){
					this.checkState();
					return false;
				}
				
				// 检查剩余数量
				if(this.Item.surplus_num <= 0){
					uni.showToast({
						title:this.$t('goods_detail.stock-not'),
						icon:'none'
					})
					this.btnText = this.$t('goods_detail.stock-not');
					this.btnDisplay = true;
					return false;
				}
				
				this.$util.go('pages/sub_order?goods_id='+this.Id,{'path':'/mall/','login':true});
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: var(--theme-page-bg);
	}
	.m-price{
		background-color: #fff;
		padding:10px;
		border-radius: 10px;
		.u-price{
			color: $auxcolor-3;
			font-size: 58rpx;
			font-weight: bold;
			// .number{
			// 	font-size: 60rpx;
			// }
		}
		.e-company{
			margin-left: 5px;
			font-size: 28rpx;
		}
		.u-num{
			font-size: 26rpx;
			color: $incolor-2;
		}
	}
	.m-title{
		background-color: #fff;
		// margin: 15px 30rpx;
		font-size: 32rpx;
		font-weight: bold;
		border-radius: 10px;
		padding: 0 10px 10px;
		text{
			margin-right: 5px;
		}
	}
	.m-details{
		margin: 15px 30rpx;
		padding-bottom:55px;
	}
	.goods-carts{
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		background:rgba(255, 255, 255, .8);
		bottom: 0;
		padding: 10px 15px;
		box-shadow: 0px 5px 30px #eee;
	}
	.goods-carts .btn{
		background-color: var(--main-color-1);
		width: 100%;
	}
	.goods-carts .x-btn.display{
		background: #e2e1e1!important;
		color: #666;
	}
	/deep/ .side-tools{
		// #ifdef APP-PLUS
		bottom: 120rpx!important;
		// #endif
		// #ifdef H5
		bottom: 130rpx;
		// #endif
	}
	.goods-badge{
		// color: #f3f3f3;
		// background-color: #333333;
		color: #999;
		background: #eee;
		padding: 0rpx 10rpx;
	}
	.goods-badge.true{
		color: #fff;
		background-color: #333;
	}
</style>
